import React from 'react'

// connect方法的作用：将额外的props传递给组件，并返回新的组件，组件在该过程中不会受到影响
import { connect } from 'react-redux'
// 引入action
import { setBreadcrumb } from '../../../store/common/action.js'
// 导入antd
import { Button } from 'antd';
// 引入富文本编辑器配置
import edit from '../../../utils/wangeditor.js'
// 引入css
import './index.css'

class PropertyInfo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      routes: [{
        path: '/index',
        breadcrumbName: '基础信息'
      }, {
        path: '/first',
        breadcrumbName: '物业信息'
      }]
    }
  }
  componentDidMount() {
    let { setBreadcrumb, loginInfo } = this.props;
    console.log(loginInfo)
    // 触发面包屑方法
    setBreadcrumb(this.state.routes)
    // 富文本编辑器
    edit.initEditor(this.refs.editorElem);
    // edit.editor.txt.html('111') //设置富文本编辑器默认内容
    // edit.editor.txt.html()   //获取富文本编辑器内容
  }
  onSubmit() {
    alert(edit.editor.txt.html())
  }
  render() {
    // 使用store
    return (
      <div>
        <p>物业信息</p>
        <div ref="editorElem"></div>
        <Button type="primary" className="button" onClick={e => this.onSubmit(e)}>提交</Button>
      </div>
    )
  }
}
// mapStateToProps:将state映射到组件的props中
const mapStateToProps = (state) => {
  return {
    loginInfo: state.loginInfo
  }
}
// mapDispatchToProps:将dispatch映射组件到props中
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    setBreadcrumb(data) {
      dispatch(setBreadcrumb(data))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(PropertyInfo);